html{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	width: 100%;
	height: 100%;
	font-size: 32px;
}

input{
	width: 2em;
	border: 0;
}

body{
	padding: 0;
	margin: 0;
}

h2 {
	margin: 0;
	padding: 0;
	width: fit-content;
	white-space: nowrap;
}

p{
	margin: 0;
}

ul{
	list-style: none;
}

button{
	font-size: 32px;
}
:root{
	--mainColor1:#ff7473;
	--mainColor2:#ffc952;
	--mainColor3:#47b8e0;
	/* 未使用 --mainColor4 --secondColor4 */
	--mainColor4:#34314c;
	--secondColor1:#a5dff9;
	--secondColor2:#ef5285;
	--secondColor3:#60c5ba;
	--secondColor4:#feee7d;
	--secondColor5:#f84343;
	--thirtyColor1:#f9c00c;
	--thirtyColor2:#00b9f1;
	--thirtyColor3:#7200da;
	--thirtyColor4:#f9320c;
}
/* 登录页 */
.loginScreen{
	width: 240px;
	height: 160px;
	position: relative;
	left: 50%;
	transform: translate(-50%,160px);
}
.loginScreen #loginName{
	width: 100%;
	height: 40%;
	padding: 0;
	border: 1px solid var(--mainColor4);
	text-indent: .5em;
	font-size: 32px;
}
.loginScreen button{
	padding: 0;
	margin: 0;
	width: 140px;
	height: 80px;
	position: absolute;
	left: 30px;
	bottom: 0;
}

/* 房间页 */
.roomScreen{
	width: 100%;
	background-color: var(--mainColor2);
}
.roomScreen #playerName{
	width: 80px;
	padding-right: 50px;
	background-color: var(--mainColor3);
}
.roomScreen #onlineNums{
	padding-left: 70px;
	background-color: var(--mainColor4);
}
.roomScreen .quickStartBtn{
	margin-left: 60px;
	background-color: var(--secondColor1);
}
.roomScreen ul{
	margin: 0;
	padding: 1px;
	display: flex;
	flex-wrap: wrap;
}
.roomScreen ul li{
	width: 33.33%;
	height: 280px;
	background: url("gameicon/desk.png") no-repeat center center;
	position: relative;
}
.roomScreen ul li div{
	width: 64px;
	height: 64px;
	position: absolute;
	top: 15px;
	left: 130px;
	background: url("gameicon/seat_empty.png");
}
.roomScreen ul li div:nth-child(2){
	top: 150px;
	left: 50px;
}
.roomScreen ul li div:nth-child(3){
	top: 150px;
	left: 210px;
}
.roomScreen ul li .hadSeat{
	background: url("gameicon/seat.png");
}
/* 页面右侧伸缩的在线玩家列表和聊天框 */
.onlineContainer{
	width: 150px;
	height: 300px;
	position: fixed;
	top: 28px;
	right: -150px;
	transition: all ease-in-out .3s;
	background-color: var(--secondColor1);
	overflow: scroll;
	border-radius: 8px 0 0 8px;
}

/* 游戏界面 */
.desk{
	height: auto;
	width: 100vw;
	display: flex;
	flex-direction: column;
}
/* 中间一行 */
.desk .row {
	height: 55vh;
	display: flex;
	justify-content: space-around;
	border-radius: 4px;
}
/* 上家 */
.desk .row .left{
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: scroll;
	background-color: var(--mainColor1);
	border-radius: 0 4px 4px 0;
}
/* 中央牌区 */
.desk .row .card_area{
	border: 1px solid black;
	height: 100%;
	flex: 2;
	position: relative;
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
	overflow: scroll;
	background-color: #80808050;
	border-radius: 6px;
}
/* 剩余牌堆 */
.desk .row .card_area .rest_card{
	position: absolute;
	left: 50%;
	width: 80px;
	height: 80px;
	transform: translateX(-50%);
	background-color: var(--thirtyColor1);
	opacity: .3;
	z-index: 9;
	font-size: 20px;
    font-weight: 900;
	border-radius: 6px;
}
/* 弃牌堆 */
.desk .row .card_area .dead_card{
	position: absolute;
	top: 80%;
    right: 0;
	width: 80px;
	height: 80px;
	transform: translateY(-50%);
	background-color: var(--thirtyColor3);
	opacity: .3;
	color: white;
	font-size: 20px;
    font-weight: 900;
	border-radius: 6px;
}
/* 弃牌堆的牌 */
.desk .row .card_area .dead_card .handCard{
	position: absolute;
}
/* 中央牌堆的与抽牌堆重合的两种牌 */
.desk .row .card_area .handCard:nth-child(5),
.desk .row .card_area .handCard:nth-child(6){
	opacity: .3;
	z-index: -1;
}
/* 下家 */
.desk .row .right{
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: scroll;
	background-color: var(--mainColor2);
	border-radius: 4px 0 0 4px;
}
/* 上家下家的手牌 */
.desk .row .left .hand,
.desk .row .right .hand{
	display: flex;
	flex-direction: row;
	flex: 3;
	flex-wrap: wrap;
}
/* 上家下家的名称 */
.player_box .box_left{
	font-size: 32px;
}
/* 上家下家的名称+得分整体区域 */
.desk .row .left .player_box,
.desk .row .right .player_box{
	flex: 2;
}
/* 当前玩家 */
.desk .bottom{
	height: 33vh;
	background-color: var(--mainColor3);
	display: flex;
	justify-content: space-between;
	border-radius: 4px 4px 0 0;
}
/* 当前玩家的名称+得分整体区域 */
.desk .bottom .player_box{
	flex: 2;
}
.desk .player_box .box_right table{
	width: 100%;
	display: flex;
}
.desk .bottom .hand{
	display: flex;
	flex: 5;
	flex-wrap: wrap;
}
/* 卡背样式 */
.card_bg{
	background: url("./puke_bg.png");
	background-size: cover;
}
/* 锁住的明牌 */
.banCard{
	border: 2px solid var(--mainColor4);
	opacity: .7;
}
/* 花色图标 */
.icon_bg{
	width: 30px;
	height: 30px;
	background-size: contain;
}

.heitao{
	background-image: url("./梅花.png");
}

.hongtao{
	background-image: url("./红桃.png");
}

.meihua{
	background-image: url("./黑桃.png");
}

/* 当前回合的行动玩家 */
.activePlayer{
	color: white;
	background-color: var(--mainColor4);
}

.playCardRecorder{
	border: 1px solid var(--secondColor2);
}